<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>zTree的使用</title>
		<script type="text/javascript" src="../../lib/ztree/jquery-1.4.4.min.js" ></script>
		<script type="text/javascript" src="../../lib/ztree/jquery.ztree.all.min.js" ></script>
		<link rel="stylesheet" href="../../lib/ztree/css/zTreeStyle/zTreeStyle.css" />
	</head>
	<body>
		<fieldset>
			<legend><h1>1-普通的zTree</h1></legend>
			<div class="zTreeDemoBackground left">
				<ul id="treeDemo" class="ztree"></ul>
			</div>
			<script>
				var setting = {	};
				var zNodes =[
					{ 
						name:"父节点1 - 展开",
						open:true,
						children: [
							{ 
								name:"父节点11 - 折叠",
								children: [
									{ name:"叶子节点111"},
									{ name:"叶子节点112"},
									{ name:"叶子节点113"},
									{ name:"叶子节点114"}
								]},
							{ 
								name:"父节点12 - 折叠",
								children: [
									{ name:"叶子节点121"},
									{ name:"叶子节点122"},
									{ name:"叶子节点123"},
									{ name:"叶子节点124"}
								]},
							{ name:"父节点13 - 没有子节点", isParent:true}
						]
					},//父节点1结束
					{ 
						name:"父节点2 - 折叠",
						children: [
							{ 
								name:"父节点21 - 展开", open:true,
								children: [
									{ name:"叶子节点211"},
									{ name:"叶子节点212"},
									{ name:"叶子节点213"},
									{ name:"叶子节点214"}
								]},
							{ 
								name:"父节点22 - 折叠",
								children: [
									{ name:"叶子节点221"},
									{ name:"叶子节点222"},
									{ name:"叶子节点223"},
									{ name:"叶子节点224"}
								]},
							{ 
								name:"父节点23 - 折叠",
								children: [
									{ name:"叶子节点231"},
									{ name:"叶子节点232"},
									{ name:"叶子节点233"},
									{ name:"叶子节点234"}
								]}
						]
					},//父节点2结束
					{ 
						name:"父节点3 - 没有子节点",
						isParent:true
					}
				];
		
				$(document).ready(function(){
					$.fn.zTree.init($("#treeDemo"), setting, zNodes);
				});
			</script>
		</fieldset>
		
		<fieldset>
			<legend><h1>2-简单的zTree</h1></legend>
			<div class="zTreeDemoBackground left">
				<ul id="treeDemo2" class="ztree"></ul>
			</div>
			<button id="btn">得到所有的选中的节点</button>
			<button id="btn2">选中一些节点</button>
			<button id="btn3">选中所有的节点</button>
			<button id="btn4">取消所有的节点</button>
			<button id="btn5">展开所有的节点</button>
			<button id="btn51">展开某个节点</button>
			<button id="btn6">收起所有的节点</button>
			
			<script>
				var setting = {
					data: {
						simpleData: {
							//true,false分别表示使用不使用简单数据模式
							enable: true,
							//节点数据中保存唯一标识的属性名称(即是ztreeDOM节点的id)
							idKey: "id",
							//节点中父ID的
							pIdKey: "pId",
							rootPId: -1 // 修正根节点
						},
						key: {
							//当后台数据只能生成 url 属性，又不想实现点击节点跳转的功能时，
							//可以直接修改此属性为其他不存在的属性名称
							url:"nourl"
						}
					},
					check:{
						enable:true,
						nocheckInherit:true
					}
				};
				
				/* 被选中的节点json数组 */
				var checkedNodes = [
					{ id:112, pId:11, name:"叶子节点112"},
					{ id:113, pId:11, name:"叶子节点113"},
					{ id:212, pId:21, name:"叶子节点212"},
					{ id:222, pId:22, name:"叶子节点222"},
					{ id:233, pId:23, name:"叶子节点233"},
					{ id:234, pId:23, name:"叶子节点234"}
				]
				
				/* 所有的节点json数组 */
				var zNodes = [
					{ id:0, pId:-1, name:"根节点 - 展开", open:true},
					{ id:1, pId:0, name:"父节点1 - 展开", open:true},
					{ id:11, pId:1, name:"父节点11 - 折叠"},
					{ id:111, pId:11, name:"叶子节点111"},
					{ id:112, pId:11, name:"叶子节点112"},
					{ id:113, pId:11, name:"叶子节点113"},
					{ id:114, pId:11, name:"叶子节点114"},
					{ id:12, pId:1, name:"父节点12 - 折叠"},
					{ id:121, pId:12, name:"叶子节点121"},
					{ id:122, pId:12, name:"叶子节点122"},
					{ id:123, pId:12, name:"叶子节点123"},
					{ id:124, pId:12, name:"叶子节点124"},
					{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
					{ id:2, pId:0, name:"父节点2 - 折叠"},
					{ id:21, pId:2, name:"父节点21 - 展开", open:true},
					{ id:211, pId:21, name:"叶子节点211"},
					{ id:212, pId:21, name:"叶子节点212"},
					{ id:213, pId:21, name:"叶子节点213"},
					{ id:214, pId:21, name:"叶子节点214"},
					{ id:22, pId:2, name:"父节点22 - 折叠"},
					{ id:221, pId:22, name:"叶子节点221"},
					{ id:222, pId:22, name:"叶子节点222"},
					{ id:223, pId:22, name:"叶子节点223"},
					{ id:224, pId:22, name:"叶子节点224"},
					{ id:23, pId:2, name:"父节点23 - 折叠"},
					{ id:231, pId:23, name:"叶子节点231"},
					{ id:232, pId:23, name:"叶子节点232"},
					{ id:233, pId:23, name:"叶子节点233"},
					{ id:234, pId:23, name:"叶子节点234"},
					{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
				];
				
				var ztree ;
				$(document).ready(function(){
					ztree = $.fn.zTree.init($("#treeDemo2"), setting, zNodes);
					
					/* 得到所有的勾选的节点对象 */
					$("#btn").click(function(){
						var nodes = ztree.getCheckedNodes();//得到checkbox选中的对象
						console.log(nodes);
						console.log("------ 华丽的分割线 ------");
						// 存放所有被选中节点的数组
						var objList = new Array();
						for(var k in  nodes){
							var obj = {
								id:nodes[k].id,
								pId:nodes[k].pId,
								name:nodes[k].name,
								isParent:nodes[k].isParent
							}
							objList.push(obj)
						}
						console.log(objList);
					});
					
					/* 选中指定的节点 */
					$("#btn2").click(function(){
						for(let k in checkedNodes){
							// 根据参数类型和值获得指定的node节点
							let node = ztree.getNodeByParam("id", checkedNodes[k].id);
							console.log("node : ",node);
							// 选中指定的node节点对象,
							// 参数2:true/false(选中/取消)
							// 参数3:true/false(是否影响父节点联动选中)
							ztree.checkNode(node, true, true);
						}
					});
					
					
					/* 选中所有的节点 */
					$("#btn3").click(function(){
						ztree.checkAllNodes(true);
					})
					/* 取消所有的节点 */
					$("#btn4").click(function(){
						ztree.checkAllNodes(false);
					})
					
					/* 展开所有的节点 */
					$("#btn5").click(function(){
						ztree.expandAll(true);
					})
					
					/* 展开某个节点 */
					$("#btn51").click(function(){
						let node = ztree.getNodeByParam("pId",0);
						// 参数2:true/false(展开/收起)
						// 参数3:true/false(是否影响父节点联动选中)
						ztree.expandNode(node,true,true);
					})
					/* 收起所有的节点 */
					$("#btn6").click(function(){
						ztree.expandAll(false);
					})
					
				});
				
			</script>
		</fieldset>
		
	</body>
</html>
